<template>
	<div class="dashboard-editor-container" style="margin-top: 110px;">
    <div class="dashboard-card">
      <div class="box-card">
        <div class="card-top">
          <span>{{$t('dashboard.title1')}}</span>
        </div>
        <div class="card-center">
          {{approvalData.commitOrderCount}}
        </div>
      </div>
      <div class="box-card">
        <div class="card-top">
          <span>{{$t('dashboard.title2')}}</span>
        </div>
        <div class="card-bottom">
          <div class="card-bottom-item">
            <div>{{approvalData.allRegiterCount}}</div>
            <div>{{$t('dashboard.accumulative')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.todayRegiterCount}}</div>
            <div>{{$t('dashboard.today')}}</div>
          </div>
        </div>
      </div>
      <div class="box-card">
        <div class="card-top">
          <span>{{$t('dashboard.title3')}}</span>
        </div>
        <div class="card-bottom">
          <div class="card-bottom-item">
            <div>{{approvalData.allRegisterAndNoCommitOrder}}</div>
            <div>{{$t('dashboard.all')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.todayRegisterAndNoCommitOrder}}</div>
            <div>{{$t('dashboard.today')}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="dashboard-card">
      <div class="box-card">
        <div class="card-top">
          <span>{{$t('dashboard.title4')}}</span>
          <span style="display: inline-block; font-size: 16px;">{{approvalData.rejectCount}}</span>
        </div>
        <div class="card-bottom">
          <div class="card-bottom-item">
            <div>{{approvalData.lastCheckRejectCount}}</div>
            <div>{{$t('dashboard.endAppr')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.firstCheckRejectCount}}</div>
            <div>{{$t('dashboard.appr')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.repeatRejectCount}}</div>
            <div>{{$t('route.approvalReview')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.modelRejectCount}}</div>
            <div>{{$t('dashboard.model')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.rejectEngineCount}}</div>
            <div>{{$t('dashboard.engine')}}</div>
          </div>
        </div>
      </div>
      <div class="box-card">
        <div class="card-top">
          <span>{{$t('dashboard.title5')}}/{{$t('route.approvalReview')}}</span>
        </div>
        <div class="card-bottom">
          <div class="card-bottom-item">
            <div>{{approvalData.fristCheckCount}}<span style="color: #b8ecfd;">/</span>{{approvalData.repeatCount}}</div>
            <div>{{$t('approval.audit')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.fristNoGetCheckCount}}<span style="color: #b8ecfd;">/</span>{{approvalData.repeatNoGetCheckCount}}</div>
            <div>{{$t('dispatch.unreceived')}}</div>
          </div>
        </div>
      </div>
      <div class="box-card">
        <div class="card-top">
          <span>{{$t('dashboard.title6')}}</span>
        </div>
        <div class="card-bottom">
          <div class="card-bottom-item">
            <div>{{approvalData.lastCheckPassCount}}</div>
            <div>{{$t('dashboard.endAppr')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.firstCheckPassCount}}</div>
            <div>{{$t('dashboard.appr')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.repeatPassCount}}</div>
            <div>{{$t('route.approvalReview')}}</div>
          </div>
          <div class="card-bottom-item">
            <div>{{approvalData.engineCheckPassCount}}</div>
            <div>{{$t('dashboard.automatic')}}</div>
          </div>
        </div>
      </div>
    </div>
    <bar-chart></bar-chart>
	</div>
</template>

<script>
  import first from '@/assets/images/first.png'
  import end from '@/assets/images/end.png'
  import loan from '@/assets/images/loan.png'
  import coll from '@/assets/images/coll.png'
  import other from '@/assets/images/other.png'
  import { getTodayCount } from 'api/dashboard'
  export default {
    name: 'dashboard-editor',
    data() {
      return {
        first,
        end,
        loan,
        coll,
        other,
        num: 8,
        approvalData: {
          commitOrderCount: '', // 当天提交的订单量
          fristCheckCount: '', // 初审审核中的量
          repeatCount: '', //复审审核中的量
          fristNoGetCheckCount: '', // 初审未领取的量
          repeatNoGetCheckCount: '', // 复审未领取的量
          rejectCount: '', // 拒绝量
          rejectEngineCount: '', // 引擎拒绝量
          firstCheckRejectCount: '', // 初审拒绝量
          repeatRejectCount: '', // 复审拒绝量
          lastCheckRejectCount: '', // 终审拒绝的量
          firstCheckPassCount: '', // 初审通过量
          repeatPassCount: '', // 复审通过量
          lastCheckPassCount: '', // 终审通过量
          todayRegiterCount: '', // 当天的注册量
          allRegiterCount: '', // 累计注册的总量
          todayRegisterAndNoCommitOrder: '', // 今天注册未提单的
          allRegisterAndNoCommitOrder: '', // 所有未提单的用户量
          modelRejectCount: ''// 模型拒绝量
        }
      }
    },
    components: {
      'bar-chart': () => import('./barChart')
    },
    created() {
      getTodayCount()
      .then(res => {
        this.approvalData = res.data
      })
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding-left: 10px;
  box-sizing: border-box;
  width: 100%;
  .dashboard-card {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: #fff;
    .card-top {
      width: 90%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #3382a3;
    }
    .card-center {
      width: 100%;
      text-align: center;
      line-height: 80px;
      font-size: 36px;
      font-weight: bold;
    }
    .card-bottom {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 80px;
      .card-bottom-item {
        text-align: center;
        div:nth-child(1){
          font-size: 28px;
          font-weight: bold;
        }
        div:nth-child(2) {
          font-size: 14px;
        }
      }
    }
  }
}
@media screen and (min-width: 481px) {
  .box-card {
    width: 30%;
    height: 110px;
    border: 1px solid #d1dbe5;
    border-radius: 4px;
    background-image: linear-gradient(90deg, #7be6f8,#5ebde9);
    overflow: hidden;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
    box-sizing: border-box;
    position: relative;
    padding: 10px 15px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
  }
}
@media screen and (max-width:480px){
  .dashboard-editor-container {
    padding-left: 0;
    width: 100%;
  }
  .box-card {
    width: 90%;
    height: 110px;
    border: 1px solid #d1dbe5;
    border-radius: 4px;
    background-image: linear-gradient(90deg, #7be6f8,#5ebde9);
    overflow: hidden;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
    box-sizing: border-box;
    position: relative;
    padding: 10px 15px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
  }
}
.icon>img {
  width: 58px;
}
.info {
  text-align: right;
  cursor: pointer;
}
.info-appr {
  cursor: pointer;
}
.title {
  text-align: right;
  font-size: 22px;
  color: #696b6e;
  padding-bottom: 5px;
}
.go {
  position: absolute;
  right: 0;
  top: 0;
  border-top-right-radius: 4px;
  width: 0;
  top: 0;
  border-color:#dfe4ec #dfe4ec transparent transparent;
  border-width: 20px 20px 20px 20px;
  border-style: solid;
  cursor: pointer;
}
.text {
  position: absolute;
  right: 3px;
  top: 2px;
  color: #fff;
  cursor: pointer;
}
.item {
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  color: #aaa;
  padding-top: 5px;
  span {
    &:nth-child(1) {
      display: inline-block;
      width: 115px;
      text-align: right;
    }
    &:nth-child(2) {
      display: inline-block;
      text-align: left;
      color: #4d9dff;
      font-weight: bold;
    }
  }
}
.appr-data {
  margin-bottom: 20px;
  .title {
    line-height: 30px;
    font-size: 18px;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-weight: bold;
  }
  .title:before{
    display: block;
    content: "";
    width: 3px;
    height: 16px;
    background-color: #309afe;
  }
  .title:before {
    margin-right: 8px;
  }
  ::before {
    box-sizing: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .appr-item {
    color: #aaa;
    font-size: 16px;
    span {
      display: inline-block;
      line-height: 25px;
      &:nth-child(1) {
        width: 150px;
        text-align: right;
      }
      &:nth-child(2) {
        display: inline-block;
        text-align: left;
        color: #4d9dff;
        font-weight: bold;
      }
    }
  }
}
</style>
